<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<style>
		
		#box1{
			width: 100px;
			height: 100px;
			margin: 50px auto;	
			background: black;
			transition: 1s;
		}

	</style>

</head>
<body id="test">
    <!-- 
        1.设置一个DIV
        2.通过9个按钮控制样式， 分别是宽度高度 200px 300px 400px 背景红色 黄色 绿色
     -->
     <div id="box1">
     	
     </div>
</body>
</html>

<script>
	var body = document.getElementById("test");

	var nameArr = ['宽度变200px','高度变200px','宽度变300px','高度变300px','宽度变400px','高度变400px','变成红色','变成黄色','变成绿色'];

	var str = '';

	for (var i = 0; i < nameArr.length; i++) {
		// 好尴尬。。。这样效率好低😂
		str += '<input type="button" name="btn" value = "' + nameArr[i] +'" id="btn' + i + '"onclick="demo(this.id)"">';
		if (i == nameArr.length - 1) {
			str += '<div id="box1"></div>'
		}
	}
	
	body.innerHTML = str;

	function demo(btn_id){
		var btn = document.getElementById('box1');
		if (btn_id == 'btn0') {
			btn.style.width = '200px';
		}else if (btn_id == 'btn1') {
			btn.style.height = '200px';
		}else if (btn_id == 'btn2') {
			btn.style.width = '300px';
		}else if (btn_id == 'btn3') {
			btn.style.height = '300px';
		}else if (btn_id == 'btn4') {
			btn.style.width = '400px';
		}else if (btn_id == 'btn5') {
			btn.style.height = '400px';
		}else if (btn_id == 'btn6') {
			btn.style.background = 'red';
		}else if (btn_id == 'btn7') {
			btn.style.background = 'yellow';
		}else if (btn_id == 'btn8') {
			btn.style.background = 'green';
		}
	}

</script>